<template>
    <a-card title="使用说明" :body-style="{ padding: 0, height: '500px' }">
        <a-collapse v-model:activeKey="activeKey">
            <a-collapse-panel key="1" header="兼容性">
                适用于基于vue3+ant-design-vue3.x版本构建的项目。
                <div un-flex un-gap-3 un-text-5xl un-text-red-300>
                    <i class="i-vscode-icons:file-type-light-pnpm" />
                    <i class="i-vscode-icons:file-type-light-pnpm?mask" />
                    <div
                        class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy"
                    />
                </div>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="安装">
                npm i --save vue-ant-plus
            </a-collapse-panel>
            <a-collapse-panel key="3" header="注册">
                <p>
                    &lttemplate&gt &ltvp-dynamic-table&gt&lt/vp-dynamic-table&gt
                    &lt/template&gt
                </p>
                <p>
                    &ltscript&gt<br />
                    import { VpDynamicTable } from 'vue-ant-plus'; <br />
                    const ButtonGroup = Button.Group; <br />
                    export default { components: { VpDynamicTable } }; <br />
                    &lt/script&gt
                </p>
            </a-collapse-panel>
            <a-collapse-panel key="4" header="hooks使用">
                &lttemplate&gt<br />
                &lta-button @click="open" type="primary"> 打开弹窗
                &lt/a-button&gt<br />
                &lt/template&gt<br />
                &ltscript&gt<br />import { useModal } from
                @vue-ant-plus/hooks;<br />
                export default { setup(){ const open = () => useModal({ title:
                '弹窗', content: 'sadasdasda', }); return { open }, } };<br />
                &lt/script&gt
            </a-collapse-panel>
            <a-collapse-panel key="5" header="配置主题">
                @import "vue-ant-plus/theme-chalk/src/index.less";
                <p>setConfigProvider({ prefixCls: prefix, });</p>
            </a-collapse-panel>
        </a-collapse>
    </a-card>
</template>
<script lang="ts" setup>
import { reactive, ref, inject } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeKey = ref(['1', '2', '3', '4', '5'])
let f = [1, 2, 3, 4, 5]
let c = [1, 2, 3]
let d = [1, 2, 3, 4, 5, 6, 7]
let e = [1, 2, 4, 3, 5]
let g = [1, 2, 4, 3, 8, 6, 7, 5]
document.documentElement.className = 'theme-default'
function pathChildren(a, b) {
    let i = 0
    let a1 = a.length - 1
    let b1 = b.length - 1
    let newArr = Array.from(a)

    while (i <= a1 && i <= b1) {
        if (a[i] == b[i]) {
            i++
        } else {
            break
        }
    }
    while (i <= a1 && i <= b1) {
        if (a[a1] == b[b1]) {
            a1--
            b1--
        } else {
            break
        }
    }
    // console.log(i, a1, b1);
    if (i > a1 && i <= b1) {
        const nextPos = b1 + 1
        while (i <= b1) {
            a[i] = b[i]
            i++
        }
    } else if (i > b1 && i <= a1) {
        while (i <= a1) {
            a[i] = ''
            i++
        }
    } else {
        const s1 = i
        const s2 = i
        const keyToNewIndexMap = new Map()
        for (i = s2; i <= b1; i++) {
            keyToNewIndexMap.set('b' + i, i)
        }
        let patched = 0
        // 需要patch的节点数量
        // 以上图为例：e2 = 5; s2 = 2; 知道需要patch的节点个数
        // toBePatched = 4
        const toBePatched = b1 - s2 + 1
        // 用于判断节点是否需要移动
        // 当新旧队列中出现可复用节点交叉时，moved = true
        let moved = false
        // used to track whether any node has moved
        // 用于记录节点是否已经移动
        let maxNewIndexSoFar = 0
        // console.log(toBePatched);
        // console.log(keyToNewIndexMap);
        const newIndexToOldIndexMap = new Array(toBePatched)
        for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0
        // console.log(newIndexToOldIndexMap);
        for (let i = s1; i <= a1; i++) {
            if (patched >= toBePatched) {
                a[i] = ''
                continue
            }
            let newIndex
            if (typeof a[i] == 'object') {
            } else {
                for (let j = s2; j <= b1; j++) {
                    if (a[i] == b[j]) {
                        newIndex = j
                        break
                    }
                }
            }
            if (newIndex === undefined) {
                newArr[newIndex] = ''
            } else {
                newIndexToOldIndexMap[newIndex - s2] = i + 1
                // 来确定中间的节点是不是需要移动
                // 新的 newIndex 如果一直是升序的话，那么就说明没有移动
                // 所以我们可以记录最后一个节点在新的里面的索引，然后看看是不是升序
                // 不是升序的话，我们就可以确定节点移动过了
                if (newIndex >= maxNewIndexSoFar) {
                    maxNewIndexSoFar = newIndex
                } else {
                    moved = true
                }
                newArr.splice(newIndex, 1, b[newIndex])
                patched++
            }
        }
        // console.log(newArr, b);
        const increasingNewIndexSequence = moved
            ? getSequence(newIndexToOldIndexMap)
            : []
        let j = increasingNewIndexSequence.length - 1
        // console.log(newIndexToOldIndexMap);
        // console.log(increasingNewIndexSequence);
        for (let i = toBePatched - 1; i >= 0; i--) {
            // 确定当前要处理的节点索引
            const nextIndex = s2 + i
            const nextChild = b[nextIndex]
            // 锚点等于当前节点索引+1
            // 也就是当前节点的后面一个节点(又因为是倒遍历，所以锚点是位置确定的节点)

            if (newIndexToOldIndexMap[i] === 0) {
                // 说明新节点在老的里面不存在
                // 需要创建
                newArr[nextIndex] = nextChild
            } else if (moved) {
                // 需要移动
                // 1. j 已经没有了 说明剩下的都需要移动了
                // 2. 最长子序列里面的值和当前的值匹配不上， 说明当前元素需要移动
                if (j < 0 || increasingNewIndexSequence[j] !== i) {
                    // 移动的话使用 insert 即可
                    newArr[nextIndex] = nextChild
                } else {
                    // 这里就是命中了  index 和 最长递增子序列的值
                    // 所以可以移动指针了
                    j--
                }
            }
        }
    }

    newArr = newArr.filter((i) => i != '')
    // console.log(newArr, b);
}
function getSequence(arr: number[]): number[] {
    const p = arr.slice()
    const result = [0]
    let i, j, u, v, c
    const len = arr.length
    for (i = 0; i < len; i++) {
        const arrI = arr[i]
        if (arrI !== 0) {
            j = result[result.length - 1]
            if (arr[j] < arrI) {
                p[i] = j
                result.push(i)
                continue
            }
            u = 0
            v = result.length - 1
            while (u < v) {
                c = (u + v) >> 1
                if (arr[result[c]] < arrI) {
                    u = c + 1
                } else {
                    v = c
                }
            }
            if (arrI < arr[result[u]]) {
                if (u > 0) {
                    p[i] = result[u - 1]
                }
                result[u] = i
            }
        }
    }
    u = result.length
    v = result[u - 1]
    while (u-- > 0) {
        result[u] = v
        v = p[v]
    }
    // console.log(result);
    return result
}

pathChildren(f, g)

// const his = window.history;
// console.log(his);
// console.log(router);
// console.log(router.getRoutes());
</script>
